//文本框获取焦点事件
function getFocus(id) {
    $(id).on('focus', function () {
        $(id).parent().css({
            'border': '1px solid #555'
        });
        // console.log('文本框获取焦点事件');
    })
}
// 文本框失去焦点事件
function loseFocus(id) {
    $(id).on('blur', function () {

        $(id).parent().css({
            'border': '1px solid #d2d2d2'
        });
        // console.log('文本框失去焦点事件');

    })
}

// 生成随机验证码开始
/**
 * 
 * @param {*} canvasId canvas元素的id
 * @returns 
 */
function code_draw(canvasId) {
    if (!canvasId) return '';
    const $canvasEle = $(`#${canvasId}`)
    let canvas_width = $canvasEle.width();
    let canvas_height = $canvasEle.height();
    let canvas = document.getElementById(canvasId); //获取到canvas的对象，演员
    let context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    let sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0"; //取值范围
    let aCode = sCode.split(",");
    let aLength = aCode.length; //获取到数组的长度
    let value = [];
    for (let i = 0; i <= 3; i++) {
        let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        let deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
        let txt = aCode[j]; //得到随机的一个内容
        value[i] = txt.toLowerCase();
        let x = 10 + i * 20; //文字在canvas上的x坐标
        let y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = code_randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
    }
    // 将生成的值以属性的方法添加到元素
    let valueStr = value.join("");
    $canvasEle.attr('data-code', valueStr)
    //验证码上显示线条
    for (let i = 0; i <= 5; i++) {
        context.strokeStyle = code_randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
    }
    //验证码上显示小点
    for (let i = 0; i <= 30; i++) {
        context.strokeStyle = code_randomColor();
        context.beginPath();
        let x = Math.random() * canvas_width;
        let y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
    }
    return valueStr;
}
/**
 * 生成随机颜色
 * @returns 颜色值rgb
 */
function code_randomColor() { //得到随机的颜色值
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}
// 生成随机验证码结束



// 页面注册图片链接
$('.register-adv').on('click', function () {
    alert('功能暂未实现，敬请期待');
})



// 手机号码事件开始
//获取焦点文本框边框改变

function mobile_phone() {
    // 判断输入手机号是否为空
    var phone_erro = '';
    //手机号码正则表达式
    var phoneRegular = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    if ($('#mobile_phone').val() == '') {
        console.log('手机号为空');
        phone_erro = `
     <label  for="mobile_phone">手机号码不能为空</label>
     `
    }
    //判断输入手机号格式是否正确
    else if (!phoneRegular.test($('#mobile_phone').val())) {
        console.log('手机号无效');
        phone_erro = `
     <label  for="mobile_phone">手机号码不是一个有效号码</label>
     `
    }
    else {
        console.log('输入正确');

        phone_erro = `
     <label  for="mobile_phone" class="succeed"><i></i></label>
     `
    }
    $('#mobile_phone').parent().next().html(phone_erro);
}
getFocus('#mobile_phone');
// 判断输入框状态
$('#mobile_phone').on('blur', function () {
    mobile_phone();
})
//失去焦点文本框边框改变
loseFocus('#mobile_phone');
// 手机号码事件结束


// 图片验证码事件开始
//获取焦点文本框边框改变
getFocus('#captcha');
//失去焦点文本框边框改变
loseFocus('#captcha');

$('#captcha').on('blur', function () {
    checkCode();
})


//点击体提交按钮执行验证码匹配
$(function () {
    code_draw('canvas');
    // 点击后刷新验证码
    $("#canvas").on('click', function () {
        code_draw('canvas');
    })

    // $(".btn").on('click', function () {
    //     checkCode()
    // })
})

function checkCode() {
    // 输入框
    let $inputValueEle = $("#captcha");
    // 获取生成验证码值
    let codeValue = $('#canvas').attr('data-code');
    // 将输入的内容转为大写，可通过这步进行大小写验证
    let inputValue = $inputValueEle.val().toLowerCase();
    if (inputValue == '') {
        // alert('请输入验证码！');
        $('#captcha-error').html(`
        <label  for="captcha-error">请输入验证码</label>
        `);
        return false;
    } else if (inputValue == codeValue) {
        // alert('提交成功！');
        $('#captcha-error').html(`
        <label  for="captcha-error" class="succeed"><i></i></label>
        `);
        return true;
    } else {
        // alert('验证码错误！请重新输入！');
        // $inputValueEle.val('');
        $('#captcha-error').html(`
        <label  for="captcha-error">验证码不正确</label>
        `);
        return false;
    }
}
//图片验证码结束



// 手机验证码事件开始
//获取焦点文本框边框改变
getFocus('#sms');
//失去焦点文本框边框改变
loseFocus('#sms');

function sms() {
    var phoneCode = '5542';
    if ($('#sms').val() != phoneCode) {
        console.log('手机验证码不正确');
        phoneCodeErro = `
        <label  for="mobile_notice">手机验证码不正确</label>
        `
    } else {
        console.log('输入正确');

        phoneCodeErro = `
        <label  for="sms" class="succeed"><i></i></label>
        `
    }
    $('#sms').parent().next().html(phoneCodeErro);
}

$('#sms').on('blur', function () {
    sms();
})

// 获取验证码按钮
var count = 0;
$('#zphone').on('click', function () {
    if ($('#mobile_phone').val() == '') {
        console.log('手机号码为空');
        var phoneCodeErro = `
        <label  for="mobile_phone">手机不能号码为空</label>
        `
        $('#mobile_notice').html(phoneCodeErro);
    } else if ($('#captcha').val() == '') {
        console.log('手机验证码不能为空');
        var smsCodeErro = `
        <label  for="phone_notice">验证码不能为空</label>
        `
        $('#phone_notice').html(smsCodeErro);
    }
    //设置获取短信验证码按钮倒计时
    else {
        clearInterval(('#zphone').time);
        if (count == 0 || count < 0) {
            console.log('获取成功');
            count = 10;
        } else {
            ('#zphone').time = setInterval(function () {
                if (count == 0) {
                    clearInterval(('#zphone').time);
                    $('#zphone').text('获取验证码');
                } else {
                    count--;
                    $('#zphone').text(count);
                }
            }, 1000)
        }
    }
})
// 手机验证码事件结束


// 设置密码事件开始
//获取焦点文本框边框改变
getFocus('#psd');
//失去焦点文本框边框改变
loseFocus('#psd');
function psd() {
    //密码正则表达式
    var psdRegular = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
    if ($('#psd').val() == '') {
        $('#pwd-error').html(`
    <label  for="pwd-error">请输入密码</label>
    `);
    } else if ($('#psd').val().length < 8) {
        console.log($('#psd').val().length);
        console.log('判断密码长度');
        $('#pwd-error').html(`
    <label  for="pwd-error">密码长度不能小于8位</label>
    `);
    } else if (!psdRegular.test($('#psd').val())) {
        console.log('不符合');
        $('#pwd-error').html(`
    <label  for="pwd-error">8-16位且必须包含大小写字母和数字的组合</label>
    `);
    } else {
        $('#pwd-error').html(`
    <label  for="pwd-error" class="succeed"><i></i></label>
    `);
    }
}
$('#psd').blur(function () {
    psd();
})



// 确认密码事件开始
//获取焦点文本框边框改变
getFocus('#pwdRepeat');
//失去焦点文本框边框改变
loseFocus('#pwdRepeat');
function pwdRepeat() {
    if ($('#pwdRepeat').val() == '') {
        $('#pwdRepeat-error').html(`
        <label  for="pwdRepeat-error" >确认密码不能为空</label>
        `);
    } else {
        if ($('#pwdRepeat').val() == $('#psd').val()) {
            $('#pwdRepeat-error').html(`
            <label  for="pwdRepeat-error" class="succeed"><i></i></label>
            `);
        } else {
            if ($('#pwdRepeat').val() != $('#psd').val()) {
                $('#pwdRepeat-error').html(`
                <label  for="pwdRepeat-error">两次密码不一致</label>
                `);
            }
        }
    }
    console.log($('.succeed').length);
}
$('#pwdRepeat').blur(function () {
    pwdRepeat();

})


// 协议勾选
$('#clause2').click(function () {
    var searchValue = location.search;
    console.log(searchValue);
    if (!$(this).is(':checked')) {
        $('#mobileagreement-error').html(`
        <label  for="mobileagreement-error">您没有接受协议</label>
        `);
        $('#input-tip').css('padding-left', '0px')
    }
    else {

        // $('#mobileagreement-error').html(`
        // <label  for="mobileagreement-error" class="succeed1"><i></i></label>
        // `);
    }
})

// 注册按钮事件开始


$('#registsubmit').click(function () {
    mobile_phone();
    checkCode();
    sms();
    psd();
    pwdRepeat();
    if ($('.succeed').length == 5) {
        console.log(1);
        // window.event.returnValue = false;
        localStorage.setItem('mobile_phone', $('#mobile_phone').val());
        localStorage.setItem('password', $('#psd').val());
    } else {
        event.preventDefault();
    }
})